<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				课程包订单列表
			</text>
		</base-nav-bar>
		<view class="exchange-page">
			<z-paging ref="paging" v-model="dataList" @query="queryList">
				<view slot="top">
					<view class="tab-list"  :style="{marginTop:customBar+10+'px'}">
						<view :class="tabsIndex==index?'tab-item active':'tab-item'" v-for="(item,index) in tabsList"
						      :key="index" @click="tabsChange(index)">
							<view class="title">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="exchange-list u-m-t-10 u-m-b-30 u-m-r-30 u-m-l-30 u-flex">
					<u-input
						class="u-flex-1"
						v-model="course_name"
						placeholder="请输入课程包名称"
						@change="refreshList();"
					></u-input>
					<u-input
						class="u-flex-1"
						:customStyle="{'margin-left':'20rpx'}"
						v-model="nickname"
						placeholder="请输入用户名称"
						@change="refreshList();"
					></u-input>
				</view>
				<view class="exchange-list">
					<view class="exchange-item" v-for="(item,index) in dataList" :key="index">
						<image :src="item.image" class="item-left"></image>
						<view class="item-center">
							<view class="item-title">{{item.name}}</view>
							<view class="item-already">总课时：{{item.sum}}</view>
							<view class="item-surplus">剩余课时：{{item.surplus_sum}}</view>
							<view class="item-surplus">用户名：{{item.nickname}}</view>
						</view>
						<view class="item-right">
							<view class="button button2" v-if="tabsIndex==0&&item.status==1"
							      @click="$Tips('/pages-merchant/class/saveCourses?card_id='+item.id+'&courses_id='+item.course_id)">
								去预约</view>
							<view class="button button2" v-if="tabsIndex==0&&item.status==2">退款申请中</view>
							<view class="button button1" v-if="tabsIndex==0&&item.status==1"
							      @click="$Tips('/pages-merchant/class/reservationRecord?card_id='+item.id)">预约记录</view>
							<view class="button button2" v-if="tabsIndex==1"
							      @click="$Tips('/pages-merchant/class/evaluateOrder?card_id='+item.id)">详情</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
import { mapGetters } from 'vuex';
import { HTTP_IMG_URL,HTTP_UPLOAD_IMG_URL } from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";
export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			tabsList: [{
				name: '进行中',
				status: '0',
			}, {
				name: '已完成',
				status: '1',
			}],
			tabsIndex: 0,
			dataList: [],
			course_name:'',
			nickname:'',
			showUser:false,
			userList:[],
			keyName:''
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo']),
		customBar() {
			let statusBarHeight = systemInfo.statusBarHeight;
			console.log("====statusBarHeight",statusBarHeight)
			// #ifndef MP
			return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45;
			// #endif
			// #ifdef MP-WEIXIN
			return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
			// #endif
			// #ifdef MP-ALIPAY
			return statusBarHeight + systemInfo.titleBarHeight;
			// #endif
		}
	},
	onShow() {
		this.keyName = '';
		// this.refreshList();
	},
	onHide() {
	},
	onLoad() {
	},
	created() {
	
	},
	methods: {
		tabsChange(index) {
			this.tabsIndex = index
			this.keyName = '';
			this.refreshList();
			
		},
		refreshList() {
			this.$refs.paging.scrollToTop()
			this.$refs.paging.refresh();
		},
		queryList(pageNo, pageSize) {
			this.$Api.merchant.wrapRechargeCard({
				page: pageNo,
				limit: pageSize,
				course_status: this.tabsList[this.tabsIndex].status,
				name: this.course_name,
				nickname:this.nickname
			}).then(res => {
				this.$refs.paging.complete(res.data.data);
			}).catch(res => {
				this.$refs.paging.complete(false);
			})
		},
		searchData($event,key){
			console.log("====key",this.$refs.search_picker.key)
		},
		chooseClass(item) {
		},
	}
};
</script>

<style lang="less" scoped>
.exchange-page {
	width: 100%;
	min-height: 100vh;
	background: #F6F6F8;
	
	.tab-list {
		min-height: 86rpx;
		margin: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.tab-item {
			width: 332rpx;
			height: 88rpx;
			text-align: center;
			background: linear-gradient(180deg, #F5FFCF 0%, #FFFFFF 100%);
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 22rpx;
			}
		}
		
		.active {
			background: linear-gradient(180deg, #ddf79a 0%, #DDF79A 13%, #A3C616 100%);
			color: #5A7004;
		}
	}
	
	.exchange-list {
		background-color: #F7F8FA;
		
		.exchange-item {
			margin: 0 30rpx 20rpx;
			border-radius: 28rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1), inset 0rpx 2rpx 2rpx 0rpx #FFFFFF;
			
			.item-left {
				width: 156rpx;
				height: 156rpx;
				margin-right: 26rpx;
			}
			
			.item-center {
				flex: 1;
				min-height: 156rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.item-title {
					font-weight: bold;
					font-size: 32rpx;
					width: 300rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.item-already {
					font-size: 26rpx;
					color: #565656;
					margin-top: 6rpx;
				}
				
				.item-surplus {
					font-size: 26rpx;
					color: #565656;
					margin-top: 16rpx;
				}
			}
			
			.item-right {
				height: 156rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				
				.button {
					width: 156rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					border-radius: 44rpx;
				}
				
				.button1 {
					color: #FFB900;
					background: #FFF8E5;
					border: 1rpx solid #FFB900;
				}
				
				.button2 {
					color: #A3C616;
					background: #FBFFED;
					border: 1rpx solid #A3C616;
				}
			}
		}
	}
}
</style>
